Template
Auth Module
  name
    Auth
  description
    Let's users log in, log out, reset password, and kick people out of the app if not logged in
  user_stories
    - As a user, i want to be able to login to my app so that I can access my campaign
    - As a user, I want to be able to log out when I'm done
    - As a user, I want to be able to safely reset my password so that I still have access if I have forgotten my credentials
    - As a user, if my account validation fails during log in, don't let me through
    - As a user, I want to remain logged in indefinitely, until I log out to save me from logging in all the time
    - As a developer, I want a simple way to establish what pages are private vs public
    - As a stakeholder, I want to show users messages/notifications before they log in and after logging out
    - As a user, when I log in, I want to be dynamically routed to the appropriate destination based on my account status
  screens
    https://content.screencast.com/users/KyleGraham/folders/Jing/media/3b4ba161-5221-4cae-9129-1c3457984040/00000002.png
    https://content.screencast.com/users/KyleGraham/folders/Jing/media/a092ff21-0757-43bb-86d3-d0626c1e4599/00000003.png
  test_plan
    -
      scenario:
        Submits correct credentials
      expected:
        Successfully routed to dashboard
    -
      scenario:
        Submits incorrect credentials
      expected:
        Error message is displayed
    -
      scenario:
        Forgets their password
      expected:
        Error message is displayed
    -
      scenario:
        Clicks (in email) to reset their password
      expected:
        New page with email text field & reset button. If clicked it emails the user a secure reset link/token that expires in 30 minutes
    -
      scenario:
        Changes their password
      expected:
        Checks if > 30m. If it is, show "expired" message. If not, show password, confirm password, & submit form button
    -
      scenario:
        Types in an invalid password
      expected:
        Repeat 30m check. If passes, update in db & route to login page with a success message
    -
      scenario:
        Clicks [Log out] button
      expected:
        If password entered doesn't meet criteria, show failed message and disable submit button until passes
    -
      scenario:
        Revisits after Logging in
      expected:
        Removes all user tokens/cookies & routes user to new pae with \"thank you for visiting\" message
    -
      scenario:
        Clicks [back to login] link
      expected:
        Allowed entry without forcing them to re-login
    -
      scenario:
        Multiple failed log in attempts
      expected:
        Routes user back to login page
  components
    Message
      name:
        Message
      description:
        Displays a message at the top, inline, bottom, with a provided animation style, icon, message, & default number of seconds to expire.
      schema:
        props
          -
            name:
              children
            type:
            description:
              Show inner content
          -
            name:
              message
            type:
            description:
              The actual message string to display
          -
            name:
              type
            type:
              enum [ERROR, EXPIRED, SUCCESS, FAILED]
            description:
              Indicates the type of message it is, displaying an associated icon
          -
            name:
              hideAfterNSeconds
            type:
            description:
              Number of seconds before triggering the hideMessage() method
          -
            name:
              animationStyle
            type:
              enum []
            description:
              Options for presenting the message in a variety of entrance animations
          -
            name:
              position
            type:
            description:
        events
          -
            name:
            type:
            description:
        methods
          -
            name:
              showMessage()
            type:
            description:
              Displays the message
          -
            name:
              hideMessage()
            type:
            description:
              Hides the message
      tests:
        Rendering
          - Should display a message when one is provided
          - Should display nothing if no message is provided
          - Should show the appropriate message icon
          - Should allow the message to disappear after N provided seconds
          - Should make sure the Message does NOT disappear at all if -1 seconds is provided
          - Should display the message as an animation if an animation style is provi
          - Should display the message in the specified posit
          - Should display the message in a default position (inline) if no position is specified
          - Should show the message when showMessage() is triggered
          - Hide the message when hideMessage() is triggered
        Events
          - Should
    Logo
      name:
        Logo
      description:
        Shows a custom logo
        Will show the default logo provided by the theme. Logo displayed also be overridden. Can also show logos in 3 different sizes
      schema:
        props
          -
            name:
              children
            type:
            description:
              Show inner content
          -
            name:
              size
            type:
              enum [SMALL, MEDIUM, LARGE]
            description:
              Shows the logo in one of the three formats
          -
            name:
              imageOverride
            type:
            description:
              Overrides the logo that the parent theme provides
        events
          -
            name:
            type:
            description:
      tests:
        Rendering
          - Should show the logo from the theme if the imageOverride option is not provided
          - Should override the theme logo if an imageOverride prop is provided
          - Should show a small logo when one is provided
          - Should show a medium-sized logo when one is provided
          - Should show a large-sized logo when one is provided
          - Should show a medium-sized logo if no size is specified
          - Should show a medium-sized logo if an invalid size is specified
        Events
          - Should
  containers
    Auth
      name:
        LoginContainer
      description:
        A page using the <AuthLayout /> to show login features
        Uses AuthLayout to show an ad from the db & login features. Also triggers a verification script on login
        Shows an ad on the left and auth stuff on the right
        Can show an ad and auth block on right
      schema:
        props
          -
            name:
              children
            type:
              JSX.Element
            description:
              Component to use - will override default layouts if provided
          -
            name:
              adComponent
            type:
              JSX.Element
            description:
              Takes a component as an input that shows an ad (usually <Announcement />)
            render_props:
              handleAdClick
          -
            name:
              authComponent
            type:
              JSX.Element
            description:
              Container to use for the login screen (e.g. "Name/Email/Continue/forgot"
            render_props:
              handleValidation
              handleForgotPassword
              handleVerification
        events
          -
            name:
              onVerify
            type:
              (email: string, password: string) => boolean
            description:
              Handler that is called when the "handleVerification" render prop from the authComponent is triggered
          -
            name:
              onAdClick
            type:
              (id: string, url: string) => void
            description:
              Handler that is called when the "handleAdClick" render prop from the adComponent component is triggered
          -
            name:
              onForgotPassword
            type:
              () => void
            description:
              Handler that is called when the handleForgotPassword render prop from the authComponent is triggered
          -
            name:
              onValidate
            type:
              (email: string, password: string): boolean
            description:
              Handler that is called when the handleValidation render prop is triggered from the authComponent prop
        note
          (use the following render props for authComponent)
          handleVerification
            triggers the onVerify event
          handleForgotPassword
            triggers the onForgotPassword event
          handleValidation
            triggers the onValidation event
          handleAdClick
            triggers the onAdClick event
      tests:
        Rendering
          - Should render in the dom
        Events
          - Should call the appropriate API when the handleVerify method is called
          - Should navigate to the 'forgot password' page when the handleForgotPassword method is called
          - Should call the appropriate API when the handleValidate method is called
    AuthRoute
      name:
      description:
      schema:
        props
          -
            name:
            type:
            description:
        events
          -
            name:
            type:
            description:
      tests:
        Rendering
          - Should
        Events
          - Should
    AuthLayout
      name:
        AuthRoute
      description:
        Shows an ad on the left and auth stuff on the right
        Can show an ad and auth block on right
      schema:
        -
          name:
            children
          type:
          description:
            Show inner content
        -
          name:
            adComponent
          type:
          description:
            Takes a component as an input that shows an ad (usually <Announcement />)
        -
          name:
            authComponent
          type:
          description:
            Takes a component as an input intended to show a authorization component (like a registration form, login form, or reset form)
      tests:
        Rendering
          - Should be present in the dom when provided
    MessageLayout
      name:
        MessageLayout
      description:
        A big page with inner custom content
        Shows inner content inside
      schema:
        props
          -
            name:
              children
            type:
            description:
              Shows custom inner content (e.g. logo & message) & shows children when availabl
      tests:
        Rendering
          - Should fail when no children is provided
        Events
          - Should
    ForgotContainer
      name:
        ForgotContainer
      description:
        Page with MessageLayout & custom content
      schema:
        props
          -
            name:
              children
                Show inner content
            type:
            description:
        events
          -
            name:
            type:
            description:
        methods
          -
            name:
              handleSendResetLink(email: string, tokenExpirationDate?: Date): Boolean
            type:
            description:
              Calls the reset password API using the provided email address. tokenExpiration tells the server how long the link should remain valid
          -
            name:
              handleEmailValidation(email: string): Boolean
            type:
            description:
              Calls the email & password validation API
      tests:
        Rendering
          - Should
        Events
          - Should
        Methods
          - Should call the verification API when the handleVerify method is called
          - Should call the email & passowrd validation API when the handleEmailValidation method is called
    ResetContainer
      name:
        ResetContainer
      description:
        Page using AuthLayout & reset password content
      schema:
        props
          -
            name:
              children
                Show inner content
            type:
            description:
        events
          -
            name:
            type:
            description:
        methods
          -
            name:
              handlePasswordReset(email: string, password: string): Boolean
            type:
            description:
              Calls the password reset API
          -
            name:
              handleValidate(email: string, password: string): Boolean
            type:
            description:
              Calls the email & password validation API
          -
            name:
              handlePasswordConfirmation(password1:string, password2: string): Boolean
            type:
            description:
              Checks if the passwords match (calls the api)
      tests:
        Rendering
          - Should
        Events
          - Should
        Methods
          Should call the password reset API when the handlePasswordReset method is called
          Should call the email & password validation API when the handleValidate method is called
          - Should check if the passwords match (calls the api) when the handlePasswordConfirmation method is called
    ExpiredContainer
      name:
        ExpiredContainer
      description:
        Page that uses MessageLayout to show an expired message & default logo
        Uses MessageLayout & shows an expired message & default logo
      schema:
        props
          -
            name:
              children
            type:
            description:
              Children (<MessageLayout />)
        events
          -
            name:
            type:
            description:
      tests:
        Rendering
          - Should
        Events
          - Should
    LogoutContainer
      name:
      description:
        Shows an ad from the database
        Shows an image, or custom component
      schema:
        props
          -
            name:
              children
            type:
            description:
              Shows inner content
          -
            name:
              logo
            type:
            description:
              Shows the logo <Logo />
        events
          -
            name:
            type:
            description:
      tests:
        Rendering
          - Should
        Events
          - Should